<template>
  <div class="FlymeRadio">
    <a-radio-group :defaultValue="defaultValue" :disabled="disabled"  v-model="defaultValue" @change="inputChange">
      <template v-for="item in selectData" v-if="radioButton==false">
        <a-radio :value="item[valueKey]">{{item[labelKey]}}</a-radio>
      </template>
      <!--button样式-->
      <template v-for="item in selectData" :disabled="disabled"  v-if="radioButton==true">
        <a-radio-button :value="item[valueKey]">{{item[labelKey]}}</a-radio-button>
      </template>
    </a-radio-group>
  </div>
</template>

<script>
  export default {
    name: 'fRadio',
    model: {
      prop: 'value',
      event: 'change.value'
    },
    props: {
      value: {
        type: [String, Number, Array],
        default: ''
      },
      /*禁用状态*/
      disabled: {
        type: Boolean,
        default: false
      },
      /*radio控件样式*/
      radioButton: {
        type: Boolean,
        default: false
      },
      /* 通用数据源 */
      data: {
        type: [String, Array],
        required: false,
        default: null
      },
      /*数据源value对应取值字段*/
      valueKey: {
        type: String,
        default: 'value'
      },
      /*数据源label对应取值字段*/
      labelKey: {
        type: String,
        default: 'label'
      }
    },
    data() {
      return {
        selectData: [],
        defaultValue: this.value
      }
    },
    watch: {
      data(data) {
        this.initValue(data)
      },
      value(value) {
        this.defaultValue = value
      }
    },
    methods: {
      inputChange(e) {
        // const { value } = e.target
        //this.$emit('update:value', value)
        console.log("33333",e)
        this.$emit('change', e)
      },
      initValue(value) {
        this.selectData = value
      }
    },
    created() {
      this.initValue(this.data)
    }
  }
</script>

